<template>
  <div class="control">
    <logo></logo>
    <!-- 设备控制 -->
    <section>
      <van-panel
        :title="lighting1.Name"
        class="my-van-panel pt-1"
      >
      </van-panel>
      <van-cell-group>
        <van-row @click="hangderBtn(lighting1.SensorId,$event)">
          <van-col span="8">
            <van-button
              plain
              type="info"
              class="my-btn my-btn-one-1"
              :id="lighting1.SensorId"
              OperatingStatus="1"
            >　1　</van-button>
          </van-col>
          <van-col span="8">
            <van-button
              plain
              type="info"
              class="my-btn my-btn-one-2"
              :id="lighting1.SensorId"
              OperatingStatus="2"
            >　2　</van-button>
          </van-col>
          <van-col span="8">
            <van-button
              plain
              type="info"
              class="my-btn my-btn-one-3"
              :id="lighting1.SensorId"
              OperatingStatus="0"
            >关</van-button>
          </van-col>
        </van-row>
      </van-cell-group>

      <div class="separate"></div>

      <van-panel
        :title="lighting2.Name"
        class="my-van-panel pt-1"
      >
      </van-panel>

      <van-cell-group>
        <van-row @click="hangderBtn(lighting2.SensorId,$event)">
          <van-col span="8">
            <van-button
              plain
              type="info"
              class="my-btn my-btn-two-1"
              :id="lighting2.SensorId"
              OperatingStatus="1"
            >　1　</van-button>
          </van-col>
          <van-col span="8">
            <van-button
              plain
              type="info"
              class="my-btn my-btn-two-2"
              :id="lighting2.SensorId"
              OperatingStatus="2"
            >　2　</van-button>
          </van-col>
          <van-col span="8">
            <van-button
              plain
              type="info"
              class="my-btn my-btn-two-3"
              :id="lighting2.SensorId"
              OperatingStatus="0"
            >关</van-button>
          </van-col>
        </van-row>
      </van-cell-group>

      <div class="separate"></div>
      <van-panel
        :title="lighting3.Name"
        class="my-van-panel pt-1"
      >
      </van-panel>
      <van-cell-group>
        <van-row @click="hangderBtn(lighting3.SensorId,$event)">
          <van-col span="8">
            <van-button
              plain
              type="info"
              class="my-btn my-btn-three-1"
              :id="lighting3.SensorId"
              OperatingStatus="1"
            >　1　</van-button>
          </van-col>
          <van-col span="8">
            <van-button
              plain
              type="info"
              class="my-btn my-btn-three-2"
              :id="lighting3.SensorId"
              OperatingStatus="2"
            >　2　</van-button>
          </van-col>
          <van-col span="8">
            <van-button
              plain
              type="info"
              class="my-btn my-btn-three-3"
              :id="lighting3.SensorId"
              OperatingStatus="0"
            >关</van-button>
          </van-col>
        </van-row>
      </van-cell-group>

      <div class="separate"></div>
      <van-panel
        :title="lighting4.Name"
        class="my-van-panel pt-1"
      >
      </van-panel>
      <van-cell-group>
        <van-row @click="hangderBtn(lighting4.SensorId,$event)">
          <van-col span="8">
            <van-button
              plain
              type="info"
              class="my-btn my-btn-four-1"
              :id="lighting4.SensorId"
              OperatingStatus="1"
            >　1　</van-button>
          </van-col>
          <van-col span="8">
            <van-button
              plain
              type="info"
             class="my-btn my-btn-four-2"
              :id="lighting4.SensorId"
              OperatingStatus="2"
            >　2　</van-button>
          </van-col>
          <van-col span="8">
            <van-button
              plain
              type="info"
              class="my-btn my-btn-four-3"
              :id="lighting4.SensorId"
              OperatingStatus="0"
            >关</van-button>
          </van-col>
        </van-row>
      </van-cell-group>
      <div class="separate"></div>
    </section>
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from '@/components/Tabbar.vue'
import logo from '@/components/Logo.vue'
export default {
  name: 'control',
  components: {
    logo,
    tabbar
  },
  data() {
    return {
      checkedone: {
        checked1: true,
        checked2: false,
        checked3: false
      },
      lighting1: {
        SensorId: '8666fd36-524a-449b-8505-e47dd65c2efa',
        EnabledState: false,
        OperatingStatus: 0,
        Name: '',
        TypeName: '',
        GroupNo: 0
      },
      lighting2: {
        SensorId: 'b8b59392-a893-4859-953f-1ecf04586733',
        EnabledState: false,
        OperatingStatus: 0,
        Name: '',
        TypeName: '',
        GroupNo: 0
      },
      lighting3: {
        SensorId: '359e6ad9-7f69-4fa2-aaa8-4197af9feb40',
        EnabledState: false,
        OperatingStatus: 0,
        Name: '',
        TypeName: '',
        GroupNo: 0
      },
      lighting4: {
        SensorId: '411debfe-0dbc-4e93-bd54-a28851a29555',
        EnabledState: false,
        OperatingStatus: 0,
        Name: '',
        TypeName: '',
        GroupNo: 0
      }
    }
  },
  created() {
    this.lighting()
  },
  methods: {
    async hangderBtn(id, event) {
      console.log(id)
      this.lighting1.OperatingStatus = event.toElement.attributes.operatingstatus.value
      console.log(event.toElement.attributes.operatingstatus.value)
      // this.optVal1 = event.toElement.attributes.operatingstatus.value
      const { data: res } = await this.$http.post(`SocketServer/Operating`, {
        ID: id,
        GatewayType: 0,
        OperationType: this.lighting1.OperatingStatus,
        TaskType: 0,
        Value: 0
      })
      console.log(res)
      if (res.Message !== '操作成功') return this.$message.error(res.Message)
      this.$message.success('操作成功')
      this.lighting()
    },
    async lighting(OperatingStatus) {
      // ID:  8666fd36-524a-449b-8505-e47dd65c2efa
      // GatewayType: 0
      // OperationType: 1
      // TaskType: 0
      // Value: 0
      const { data: res } = await this.$http.post(`AreaSensor/GetSensorByAreaId`, {
        id: '622AD4A7-FC01-4FF8-8069-3E591B120773',
        type: 0
      })
      console.log(res[0].Details)
      this.lighting1 = res[0].Details[0]
      this.lighting2 = res[0].Details[1]
      this.lighting3 = res[0].Details[2]
      this.lighting4 = res[0].Details[3]
      console.log(this.lighting1)
      console.log(this.lighting2)
      console.log(this.lighting1.OperatingStatus === 0)
      if (this.lighting1.OperatingStatus === 1) {
        console.log($('#8666fd36-524a-449b-8505-e47dd65c2efa')[0].classList[1])
        $('.my-btn-one-1').addClass('active-btn')
        $('.my-btn-one-2').removeClass('active-btn')
        $('.my-btn-one-3').removeClass('active-btn')
       
      } else if (this.lighting1.OperatingStatus === 2) {
        $('.my-btn-one-2').addClass('active-btn')
        $('.my-btn-one-1').removeClass('active-btn')
        $('.my-btn-one-3').removeClass('active-btn')
        
      }else if (this.lighting1.OperatingStatus ===0) {
        $('.my-btn-one-3').addClass('active-btn')
        $('.my-btn-one-1').removeClass('active-btn')
        $('.my-btn-one-2').removeClass('active-btn')
       
      }
       if (this.lighting2.OperatingStatus === 1) {
        $('.my-btn-two-1').addClass('active-btn')
        $('.my-btn-two-2').removeClass('active-btn')
        $('.my-btn-two-3').removeClass('active-btn')
       
      } else if (this.lighting2.OperatingStatus === 2) {
        $('.my-btn-two-2').addClass('active-btn')
        $('.my-btn-two-1').removeClass('active-btn')
        $('.my-btn-two-3').removeClass('active-btn')
        
      }else if (this.lighting2.OperatingStatus ===0) {
        $('.my-btn-two-3').addClass('active-btn')
        $('.my-btn-two-1').removeClass('active-btn')
        $('.my-btn-two-2').removeClass('active-btn')
       
      }

       if (this.lighting3.OperatingStatus === 1) {
        $('.my-btn-three-1').addClass('active-btn')
        $('.my-btn-three-2').removeClass('active-btn')
        $('.my-btn-three-3').removeClass('active-btn')
       
      } else if (this.lighting3.OperatingStatus === 2) {
        $('.my-btn-three-2').addClass('active-btn')
        $('.my-btn-three-1').removeClass('active-btn')
        $('.my-btn-three-3').removeClass('active-btn')
        
      }else if (this.lighting3.OperatingStatus ===0) {
        $('.my-btn-three-3').addClass('active-btn')
        $('.my-btn-three-1').removeClass('active-btn')
        $('.my-btn-three-2').removeClass('active-btn')
      }

       if (this.lighting4.OperatingStatus === 1) {
        $('.my-btn-four-1').addClass('active-btn')
        $('.my-btn-four-2').removeClass('active-btn')
        $('.my-btn-four-3').removeClass('active-btn')
       
      } else if (this.lighting4.OperatingStatus === 2) {
        $('.my-btn-four-2').addClass('active-btn')
        $('.my-btn-four-1').removeClass('active-btn')
        $('.my-btn-four-3').removeClass('active-btn')
        
      }else if (this.lighting4.OperatingStatus ===0) {
        $('.my-btn-four-3').addClass('active-btn')
        $('.my-btn-four-1').removeClass('active-btn')
        $('.my-btn-four-2').removeClass('active-btn')
       
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-cell__title {
  text-align: left;
}
.van-panel {
  padding-left: 38%;
  box-sizing: border-box;
}
.van-row {
  padding: 10px;
  button.my-btn {
    width: 3rem;
    border-radius: 5px;
  }
}

.van-cell:not(:last-child)::after {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 0;
  bottom: 0;
  left: 16px;
  border-bottom: unset;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

[class*='van-hairline']::after {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border: unset;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
.color-btn-active {
  background-color: #1989fa;
  color: #fff;
}

</style>


